<template>
    <div class="navbar">
        <div class="tupian">
            <img src="../../assets/images/图层 4.png" alt="">
        </div>
        <div class="navbar-job">
            <div class="navbar-job-title">
                <img src="../../assets/images/头像.png" alt="">
            </div>
            <div class="navbar-job-content">
                <div @click="wode"><span>昵称</span></div>
                <div><span>编辑个性签名</span></div>
            </div>
        </div>
        <div class="dingdan">
            <div>我的订单</div>
            <span>></span>
        </div>
        <div class="add-job">
            <div class="add">
                <img src="../../assets/images/钱包.png" alt="">
                <div>待付款</div>
            </div>
            <div class="add">
                <img src="../../assets/images/待发货(1).png" alt="">
                <div>待发货</div>
            </div>
            <div class="add">
                <img src="../../assets/images/首页-已发货.png" alt="">
                <div>待收货</div>
            </div>
            <div class="add">
                <img src="../../assets/images/待评价.png" alt="">
                <div>待评价</div>
            </div>
        </div>
        <div class="xixi-job">
            <div class="xixi">
                <div class="xixi-title">
                    <img src="../../assets/images/1.png" alt="">
                    <span>账户余额</span>
                </div>
                <div>></div>
            </div>
            <div class="xixi">
                <div class="xixi-title">
                    <img src="../../assets/images/2.png" alt="">
                    <span>推广中心</span>
                </div>
                <div>></div>
            </div>
            <div class="xixi">
                <div class="xixi-title">
                    <img src="../../assets/images/3.png" alt="">
                    <span>我的收藏</span>
                </div>
                <div>></div>
            </div>
            <div class="xixi">
                <div class="xixi-title">
                    <img src="../../assets/images/4.png" alt="">
                    <span>关于我们</span>
                </div>
                <div>></div>
            </div>
            <div class="xixi">
                <div class="xixi-title">
                    <img src="../../assets/images/5.png" alt="">
                    <span>地址管理</span>
                </div>
                <div>></div>
            </div>
            <div class="xixi">
                <div class="xixi-title">
                    <img src="../../assets/images/6.png" alt="">
                    <span>设置</span>
                </div>
                <div>></div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.tupian img{
    width: 100%;
}
    .navbar-job {
        display: flex;
        padding: 10px;
        position: absolute;
        top: 10px;
    }
    .navbar-job-title img{
        width: 80px;
        height: 80px;
        padding: 20px 0;
    }
    .navbar-job-content{
        margin-top: 20px;
        color: #fff;
    }
    .navbar-job-content div {
        padding: 10px 10px;
    }
    .dingdan {
        display: flex;
        justify-content: space-between;
        padding: 15px;
        border-bottom: #ccc 1px solid;
    }
    .dingdan span {
        color: #ccc;
        font-size: 20px;
        line-height: 20px;
    }
    .add-job {
        display: flex;
        justify-content: space-between;
        padding: 15px;
        border-bottom: 13px solid #ececec;
    }
    .xixi {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 40px;
        padding: 15px;
        border-bottom: 1px solid #ececec;
    }
    .xixi-title {
        display: flex;
    }
    .xixi-title span {
        padding: 0 10px;
    }
</style>
<script setup>
    import { useRouter } from 'vue-router'
    const router = useRouter()
    function wode() {
        router.push('/wodedenglu')
    }
</script>